import { Canvas, Story, Meta } from "@storybook/blocks";
import { Autocomplete, Stack } from "metabase/ui";
import * as AutocompleteStories from "./Autocomplete.stories";

<Meta of={AutocompleteStories} />

# Autocomplete

Our themed wrapper around [Mantine Autocomplete](https://v6.mantine.dev/core/autocomplete/).

## Docs

- [Mantine Autocomplete Docs](https://v6.mantine.dev/core/autocomplete/)

## Examples

<Canvas>
  <Story of={AutocompleteStories.Default} />
</Canvas>

### Size - md

<Canvas>
  <Story of={AutocompleteStories.EmptyMd} />
</Canvas>

#### Asterisk

<Canvas>
  <Story of={AutocompleteStories.AsteriskMd} />
</Canvas>

#### Description

<Canvas>
  <Story of={AutocompleteStories.DescriptionMd} />
</Canvas>

#### Disabled

<Canvas>
  <Story of={AutocompleteStories.DisabledMd} />
</Canvas>

#### Error

<Canvas>
  <Story of={AutocompleteStories.ErrorMd} />
</Canvas>

#### Read only

<Canvas>
  <Story of={AutocompleteStories.ReadOnlyMd} />
</Canvas>

#### Icons

<Canvas>
  <Story of={AutocompleteStories.IconsMd} />
</Canvas>

#### Groups

<Canvas>
  <Story of={AutocompleteStories.GroupsMd} />
</Canvas>

#### Large sets

<Canvas>
  <Story of={AutocompleteStories.LargeSetsMd} />
</Canvas>

### Size - xs

<Canvas>
  <Story of={AutocompleteStories.EmptyXs} />
</Canvas>

#### Asterisk

<Canvas>
  <Story of={AutocompleteStories.AsteriskXs} />
</Canvas>

#### Description

<Canvas>
  <Story of={AutocompleteStories.DescriptionXs} />
</Canvas>

#### Disabled

<Canvas>
  <Story of={AutocompleteStories.DisabledXs} />
</Canvas>

#### Error

<Canvas>
  <Story of={AutocompleteStories.ErrorXs} />
</Canvas>

#### Read only

<Canvas>
  <Story of={AutocompleteStories.ReadOnlyXs} />
</Canvas>

#### Icons

<Canvas>
  <Story of={AutocompleteStories.IconsXs} />
</Canvas>

#### Groups

<Canvas>
  <Story of={AutocompleteStories.GroupsXs} />
</Canvas>

#### Large sets

<Canvas>
  <Story of={AutocompleteStories.LargeSetsXs} />
</Canvas>
